<template>
	<div class="download-wrap2">
		<div class="title-box">
			<div class="status">
				<i class="icon"></i>领取成功
			</div>
			<div class="title">
				<em class="tip">{{ cpnDetail.activityName  }}</em>已放入您的账户
			</div>
			<div class="cpn-box">
				<div class="title ellipsis">
					{{ cpnDetail.activityName  }}
				</div>
				<div class="price">
					<span><em>券面额：</em><em class="price-text">{{ cpnDetail.faceValue }}</em><em class="price-danwei">元</em></span>
				</div>
				<div class="desc">
					{{ cpnDetail.ruleDesc }}
				</div>
				<div class="store-price-xian">
					<span><em >{{ cpnDetail.payPrice1 }}</em><em class="price-text">{{ cpnDetail.payPrice2 }}</em><em class="price-danwei">{{ cpnDetail.payPrice3 }}</em></span>
				</div>
				<div class="store-price-yuan">
					<span><em>{{ cpnDetail.storePrice1 }}</em><em class="price-text">{{ cpnDetail.storePrice2 }}{{ cpnDetail.storePrice3 }}</em></span>
				</div>
			</div>
		</div>
		<div class="login-step">
			<img src="../../../assets/image/invitefriends2/download2/banner-01.jpg" />
		</div>
		<div class="download-box">
			<a href="//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0623_ldxwx" class="btn" ca="推荐有礼_领取成功$下载车享家APP">下载车享家APP</a>
		</div>
		
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	export default{
		data (){
			return {
				cpnDetail: {
					
				}
			};
		},
		components: {},
		created (){
			var _this = this;
			var cpnDetailStr = localStorage.getItem('cpnDetail');
			console.log(cpnDetailStr);
			var cpnDetailObj = JSON.parse(cpnDetailStr);
			_this.cpnDetail = cpnDetailObj;
		},
		mounted (){
			var _this = this;
			//打点
    		_this.$nextTick(function () {
    			common.ANA_AnalyticsScan();
    		});
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		background: #ffffff;
		height: 100%;
	}
	.download-wrap2 {
		height: 100%;
		position: relative;
		background: #ffffff url(../../../assets/image/invitefriends2/download2/btn-download-bg.jpg) center bottom no-repeat;
		background-size: 100% 19.2rem;
		.title-box {
			width: 100%;
			height: 26.7rem;
			background: #ffffff url(../../../assets/image/invitefriends2/download2/title-bg.png) center top no-repeat;
			background-size: 100% 26.7rem;
			text-align: center;
			.status {
				margin: 0 auto;
				padding-top: 2.5rem;
				width: 11rem;
				height: 2.9rem;
				font-size:2.1rem;
				color:#ffffff;
				box-sizing: content-box;
				.icon {
					display: inline-block;
					width: 2.4rem;
					height: 2.4rem;
					background: transparent url(../../../assets/image/invitefriends2/download2/icon-success.png) center center no-repeat;
					background-size: 2.4rem 2.4rem;
					vertical-align: middle;
					margin-right: 0.2rem;
				}
				
			}
			.title {
				margin-top: 0.9rem;
				height: 2.1rem;
				line-height: 2.1rem;
				font-size:1.5rem;
				color:#ffffff;
				.tip {
					color:#ffea00;
				}
			}
			.cpn-box {
				width: 15.3rem;
				height: 14.5rem;
				margin: 0 auto;
				margin-top: 2rem;
				padding-top: 1.2rem;
				background: transparent url(../../../assets/image/invitefriends2/download2/cpn-bg.png) center top no-repeat;
				background-size: 15.3rem 14.5rem;
				text-align: center;
				.title {
					height: 2.6rem;
					line-break: 2.6rem;
					font-size:1.9rem;
					color:#262f34;
					font-weight: 800;
				}
				.price {
					height: 1.1rem;
					margin-top: 0.5rem;
					font-size:1.1rem;
					color:#999999;
				}
				.desc {
					margin-top: 0.4rem;
					height: 1.1rem;
					font-size:1.1rem;
					color:#999999;
				}
				.store-price-xian {
					height: 1.5rem;
					margin-top: 1.6rem;
					font-size:1.5rem;
					color:#000000;
					.price-text {
						font-size:1.9rem;
						color:#f12626
					}
					.price-danwei {
						font-size:1.5rem;
						color:#f12626
					}
				}
				.store-price-yuan {
					margin-top: 1rem;
					height: 1.1rem;
					font-size:1.1rem;
					color:#999999;
					.price-text {
						font-size:1.1rem;
						color:#999999;
						text-decoration: line-through;
					}
				}
			}
		}
		.login-step {
			padding-bottom: 6.2rem;
			img {
				display: block;
				width: 100%;
			}
		}
		.download-box {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			border-top: 1px solid #e7e7e7;
			padding: 0.8rem 0;
			background: #ffffff;
			.btn {
				display: block;
				margin: 0 auto;
				width: 31.5rem;
				height: 4.6rem;
				line-height: 4.6rem;
				background: #0084ff;
				border-radius: 0.4rem;
				text-align: center;
				font-size: 1.7rem;
				color: #ffffff;
			}
		}
		
	}
	.ellipsis {
		white-space: nowrap;  
        overflow: hidden;  
        text-overflow: ellipsis;
        display: block;  
	}
</style>
